<template>
  <el-card
    class="m_t_b_10px xd-LearningHome-OnlineExams-ExamInstructions"
    shadow="hover"
  >
    <div
      slot="header"
      class="title"
    >考试说明</div>
    <div style="text-align: right;">
      <el-button @click="showReceiveDetail">考试详情</el-button>
    </div>
    <div class="exam-remark">
      <p>
        <span class="label">本次考试：</span>
        <span class="title">{{paperInfo.paperTitle}}</span>
      </p>
      <p>
        <span class="label">考试次数：</span>
        {{getPaperLimit}}
      </p>
      <p>
        <span class="label">考试限时：</span>
        {{paperInfo.paperTimeLong}}分钟
      </p>
      <p>
        <span class="label">获得积分：</span>
        {{paperInfo.paperPoints}}分
      </p>
      <!-- <p>
        <span class="label">考试规则：</span>
        {{paperInfo.examRules}}
      </p>-->
      <p style="width:auto;text-align:center;justify-content:center;">如果考试异常中断，请退出并及时按同样步骤进入，继续考试</p>

    </div>
    <el-button
      type="primary"
      @click="startExam"
    >开始考试</el-button>

    <el-dialog :visible.sync="receiveDetailVisible">
      <div slot="title">
        <div
          class="dialog-back"
          v-show="deptHistory.length > 1"
          @click="dialogBack"
        >&lt;&nbsp;&nbsp;返回</div>
      </div>
      <template>
        <div style=" height: 60vh;overflow-y: auto;overflow-x:hidden;">
          <h4>未学习</h4>
          <el-row :gutter="28">
            <el-col
              v-for="(item, idx) in receiveListIsDeptNotRead"
              :key="'dept' + idx"
              :span="4"
            >
              <div
                class="grid-content bg-primary dept"
                :class="{'bg-primary-light': item.readCount !== item.userCount}"
                @click="fetchReceiveDetail(item)"
              >
                {{item.dept_name}}
                <div>({{item.readCount}}/{{item.userCount}})</div>
              </div>
            </el-col>
            <el-col
              v-for="(item, idx) in receiveListNotDeptNotRead"
              :key="'dept' + idx"
              :span="4"
            >
              <div
                class="grid-content bg-primary"
                :class="{'bg-primary-light': !item.readFlag}"
              >{{item.user_name}}</div>
            </el-col>
          </el-row>
          <h4>已学习</h4>
          <el-row :gutter="28">
            <el-col
              v-for="(item, idx) in receiveListIsDeptIsRead"
              :key="'dept' + idx"
              :span="4"
            >
              <div
                class="grid-content bg-primary dept" style="background: #07806d;"
                :class="{'bg-primary-light': item.readCount !== item.userCount}"
                @click="fetchReceiveDetail(item)"
              >
                {{item.dept_name}}
                <div>({{item.readCount}}/{{item.userCount}})</div>
              </div>
            </el-col>
            <el-col
              v-for="(item, idx) in receiveListNotDeptIsRead"
              :key="'dept' + idx"
              :span="4"
            >
              <div
                class="grid-content bg-primary" style="background: #07806d;"
                :class="{'bg-primary-light': !item.readFlag}"
              >{{item.user_name}}</div>
            </el-col>
          </el-row>
        </div>
      </template>
    </el-dialog>
  </el-card>
</template>
<script>
  export default {
    name: 'ExamInstructions',
    data() {
      return {
        receiveDetailVisible: false,
        receiveList: [],
        loading: false,
        paperInfo: {},
        // 1 在线考试 2 学习课后练习
        examType: 0,
        deptHistory: [],
        receiveParams: { deptids: '' } //初始接收详情参数
      };
    },
    computed: {
      //
      getPaperLimit: function(){
        let limits = ''
        const paperLimit = this.paperInfo.paperLimit
        if(paperLimit==0){
          limits = '不限次';
        }
        if(paperLimit==-1){
          limits = '一天一次'
        }
        if(paperLimit>0){
          limits = paperLimit + '次'
        }
        return limits
      },
      receiveListIsDeptList: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept === 1;
        });
      },
      receiveListIsDeptIsRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept === 1 && item.readCount === item.userCount;
        });
      },
      receiveListIsDeptNotRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept === 1 && item.readCount !== item.userCount;
        });
      },
      receiveListNotDeptNotRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept != 1 && item.readFlag != 1;
        });
      },
      receiveListNotDeptIsRead: function() {
        return this.receiveList.filter(function(item) {
          return item.is_dept != 1 && item.readFlag === 1;
        });
      }
    },
    mounted() {
      window.scrollTo(0, 0);
      this.examType = this.$route.query.examType || 1;
      if (this.$route.query.id) {
        this.fetchDetail(this.$route.query.id);
      } else {
        this.paperInfo = utils.getItem('ExamInstructionsPaperInfo');
        console.log(this.paperInfo);
      }
    },
    methods: {
      startExam() {
        utils.setStartExam('1');
        this.$router.push({
          path: '/LearningHome/OnlineExams/StartExam',
          query: { id: this.paperInfo.paperId, examType: this.examType }
        });
      },
      fetchDetail(tid) {
        let loadingInstance = this.Loading.service({
          fullscreen: true,
          lock: true,
          text: '拼命加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        utils.post(
          'examination/ExamInstructions',
          {
            paperId: tid
          },
          (res) => {
            loadingInstance.close();
            if (res.success) {
              this.paperInfo = res.data;
            }
          }
        );
      },
      showReceiveDetail() {
        this.fetchReceiveDetail(this.receiveParams);
      },
      fetchReceiveDetail(params, isBack) {
        let loadingInstance = this.Loading.service({
          fullscreen: true,
          lock: true,
          text: '拼命加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.selectDeptName = params.dept_name;
        const deptids = params.dept_id || '';
        params.i_id = this.paperInfo.paperId;
        let url = 'examination/paperExaminationDetail';
        if (this.examType == 2) {
          url = 'curriculum/paperCurriculumDetail';
        }
        utils.post(
          url,
          {
            paperId: params.i_id,
            deptids: deptids
          },
          (res) => {
            loadingInstance.close();
            this.receiveDetailVisible = true;
            if (res.success) {
              this.receiveList = res.data;
              console.log(this.receiveList);
              if (!isBack) {
                this.deptHistory.unshift(params);
              }
            }
          }
        );
      },
      dialogBack() {
        this.deptHistory.shift();
        this.fetchReceiveDetail(this.deptHistory[0], true);
      }
    }
  };
</script>
<style lang="less">
  @primary-color: #cb2c21;
  @bg-light-color: #de1632;
  @bg-light-color1: #767609;
  .xd-LearningHome-OnlineExams-ExamInstructions {
    .exam-remark {
      text-align: center;
      width: 432px;
      margin: 0 auto;
      overflow: hidden;
      p {
        display: flex;
        width: auto;
        margin: 0 auto;
        margin-top: 18px;
        font-size: 16px;
        .label {
          width: auto;
        }
      }
      .title {
        font-size: 18px;
       // color: #4e9d90;
        color: #cb2c21;
        font-weight: bold;
        display: inline-flex;
        align-items: center;
        text-overflow: ellipsis;
      }
    }
    .el-button--primary {
      display: block;
      margin: 3vw auto 0 auto;
    }

    .dialog-back {
      color: @primary-color;
      cursor: pointer;
    }
    .el-row {
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
      color: #ffffff;
      text-align: center;
      margin-bottom: 20px;
    }
    .bg-primary {
      background: @primary-color;
    }
    .bg-primary-light {
      background: @bg-light-color;
    }
    .grid-content {
      border-radius: 4px;
      min-height: 30px;
      line-height: 30px;
      &.dept {
        line-height: 1;
        padding: 10px 0;
        cursor: pointer;
      }
    }
    .xd-LearningHome-CourseIntroduction .bg-primary{
      background : #204c0b !important;
    }
  }
</style>
